<template>
  <div class="molecular">
    <div class="c-header-border">
      <div class="c-header-bg">
        <el-row>
          <el-col :span="10">
            <div class="c-header-title">分子公司实际使用占比</div>
            <div id="main" class="pie-wrap" style="height: 187px"></div>
          </el-col>
          <el-col :span="14">
            <div class="c-header-bg">
              <div style="margin-top: 60px">
                <el-table
                  :data="tableData"
                  style="width: 95%"
                  :cell-style="{ padding: '0' }"
                >
                  <el-table-column prop="name" label="分子公司名称">
                  </el-table-column>
                  <el-table-column prop="date" label="授信预算总额度(万元)">
                  </el-table-column>
                  <el-table-column prop="money" label="预算使用额度(万元)">
                  </el-table-column>
                  <el-table-column
                    prop="address"
                    label="占比"
                  ></el-table-column>
                </el-table>
              </div>
            </div>
          </el-col>
        </el-row>
      </div>
      <div class="c-header-between"></div>
      <div class="c-header-bg">
        <el-row>
          <el-col :span="10">
            <div class="c-header-title">银行预算使用占比</div>
            <div id="mains" class="pie-wrap" style="height: 187px"></div>
          </el-col>
          <el-col :span="14">
            <div class="c-header-bg">
              <div style="margin-top: 60px">
                <el-table
                  :data="tableData"
                  style="width: 95%"
                  :cell-style="{ padding: '0' }"
                >
                  <el-table-column prop="name" label="分子公司名称">
                  </el-table-column>
                  <el-table-column prop="date" label="授信预算总额度(万元)">
                  </el-table-column>
                  <el-table-column prop="money" label="预算使用额度(万元)">
                  </el-table-column>
                  <el-table-column prop="address" label="占比">
                  </el-table-column>
                </el-table>
              </div>
            </div>
          </el-col>
        </el-row>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      tableData: [
        {
          date: "33.2",
          name: "分子公司1",
          address: "10%",
          money: "60.12",
        },
        {
          date: "78",
          name: "分子公司2",
          address: "33%",
          money: "60.12",
        },
        {
          date: "45.12",
          name: "分子公司3",
          address: "7%",
          money: "60.12",
        },
        {
          date: "11.23",
          name: "分子公司4",
          address: "24%",
          money: "60.12",
        },
        {
          date: "23.45",
          name: "分子公司5",
          address: "6%",
          money: "60.12",
        },
      ],
    };
  },
  methods: {
    init() {
      var chartDom = document.getElementById("main");
      var myChart = this.$echarts.init(chartDom);
      var option;
      option = {
        legend: {
          top: "bottom",
          left: "50%",
          orient: "vertical",
          itemGap: 10,
          itemWidth: 10,
          itemHeight: 10,
          icon: "circle",
          text: [
            {
              orient: "horizontal",
              itemWidth: 10,
              itemHeight: 10,
              left: "2%",
              bottom: "10%",
              data: [
                "分子公司1",
                "分子公司2",
                "分子公司3",
                "分子公司4",
                "分子公司5",
              ],
            },
            {
              orient: "vertical", //水平排列。（vertical为垂直排列}
              itemWidth: 10,
              itemHeight: 10,
              left: "2%",
              bottom: "bottom",
              data: [
                "分子公司6",
                "分子公司7",
                "分子公司8",
                "分子公司9",
                "分子公司10",
              ],
              y: "30",
            },
          ],
          textStyle: {
            fontSize: 12,
            color: "#ffffff",
          },
          // padding: [0, 1, 1, 1],
        },
        toolbox: {
          show: true,
          feature: {
            mark: { show: true },
          },
        },
        series: [
          {
            name: "面积模式",
            type: "pie",
            radius: [0, 80],
            center: ["30%", "50%"],
            roseType: "single",
            itemStyle: {
              borderRadius: 0,
            },
            label: {
              show: false,
              position: "center",
            },
            // itemStyle: {
            //   emphasis: {
            //     //选中效果
            //     shadowBlur: 10,
            //     shadowOffsetX: 0,
            //     shadowColor: "rgba(0, 0, 0, 0.5)",
            //   },
            // },
            data: [
              { value: 40, name: "分子公司1" },
              { value: 38, name: "分子公司2" },
              { value: 32, name: "分子公司3" },
              { value: 40, name: "分子公司4" },
              { value: 38, name: "分子公司5" },
              { value: 32, name: "分子公司6" },
              { value: 40, name: "分子公司7" },
              { value: 38, name: "分子公司8" },
              { value: 32, name: "分子公司9" },
              { value: 32, name: "分子公司10" },
            ],
          },
        ],
      };

      option && myChart.setOption(option);
    },
    inits() {
      var chartDom = document.getElementById("mains");
      var myChart = this.$echarts.init(chartDom);
      var option;
      option = {
        legend: {
          top: "bottom",
          left: "50%",
          orient: "vertical",
          itemGap: 10,
          itemWidth: 10,
          itemHeight: 10,
          icon: "circle",
          itemStype: {
            color: {
              type: "radiul",
            },
          },
          textStyle: {
            fontSize: 12,
            color: "#ffffff",
          },
          // padding: [0, 1, 1, 1],
        },

        toolbox: {
          show: true,
          feature: {
            mark: { show: true },
          },
        },
        series: [
          {
            name: "面积模式",
            type: "pie",
            radius: [0, 80],
            center: ["30%", "50%"],
            roseType: "single",
            itemStyle: {
              borderRadius: 5,
            },
            label: {
              show: false,
              position: "center",
            },
            data: [
              { value: 40, name: "分子公司1" },
              { value: 38, name: "分子公司2" },
              { value: 32, name: "分子公司3" },
              { value: 40, name: "分子公司4" },
              { value: 38, name: "分子公司5" },
              { value: 32, name: "分子公司6" },
              { value: 40, name: "分子公司7" },
              { value: 38, name: "分子公司8" },
              { value: 32, name: "分子公司9" },
              { value: 32, name: "分子公司10" },
            ],
          },
        ],
      };

      option && myChart.setOption(option);
    },
  },
  mounted() {
    this.init();
    this.inits();
  },
};
</script>

<style scoped>
.el-table {
  font-size: 12px;
  background: #105065;
  color: white;
  overflow: hidden;
}
.el-table >>> td {
  background: #0f5a6a;
}
.table /deep/ .el-table,
.el-table__expanded-cell {
  background-color: transparent;
}
.el-table >>> th {
  background: #1c697e;
  color: white;
}
</style>